<template>
  <div class="container w-full">
    <wc-waterfall class="mt-5" :gap="20" :cols="4">
      <el-card
        class="rounded-2xl card"
        v-for="item in house"
        :key="item.id"
        @click="clickCard(item.id)"
      >
        <img class="rounded-t-2xl" :src="item.img" />
        <p class="title">
          {{ item.title }}
        </p>
        <p class="des view-text">
          {{ item.des }}
        </p>
      </el-card>
    </wc-waterfall>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { searchByTitle } from "@/api/house";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const house = ref({});
const router = useRouter();

const init = async () => {
  // 通过title模糊搜索
  const res = await searchByTitle(route.params.key);
  house.value = res.result;
};
init();

function clickCard(id) {
  router.push("/house/" + id);
}
</script>
<style lang="scss" scoped>
.container {
  padding: 20px 40px;
}
.view-text {
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card {
  transition: all 0.6s;
}
.card:hover {
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
}
.title {
  font-size: 15px;
  color: #666;
  margin: 4px;
}
.des {
  font-size: 13px;
  color: #9e9e9e;
  margin: 4px;
  padding-bottom: 6px;
}
</style>
